<template>
  <el-main>
    <el-row>
      <el-col :lg="{span:16,offset:1}" :xs="24">
        <el-row type="flex" justify="space-between" align="middle" style="margin:20px 0">
          <my-Search :inputNoOptionSpan="24" :inputPlaceholder="'公告标题'" :searchWay="true"  @onSearch="getSearchContent"></my-Search>
          <el-date-picker
            value-format="yyyy-MM-dd"
            v-model="choiceDate"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="发布开始日期"
            end-placeholder="发布结束日期"
            :picker-options="pickerOptions">
          </el-date-picker>
          <el-switch
            style="display: block;font-size:16px"
            v-model="searchCondition.orderField"
            active-value="1"
            inactive-value="0"
            active-color="#ff4949"
            inactive-color="#67C23A"
            active-text="浏览最多"
            inactive-text="最新发布"
            @change="getNoticeList"
            >
          </el-switch>
        </el-row>
        <el-row>
          <el-tabs v-model="activeTab" type="border-card" @tab-click="togo" :lazy="true">
            <el-tab-pane name="0" label="全部">
              <div v-if="activeTab==0">
                <el-row class="link" v-for="item in noticeList" :key="item.id">
                  <el-col :lg="20" :xs="24">
                    <router-link :to="`/noticeinfo/0/${item.no}`">
                      <el-link icon="el-icon-caret-right">【{{item.type}}】{{item.title | showTitle}}</el-link>
                    </router-link>
                  </el-col>
                  <el-col class="hidden-sm-and-down" :lg="4" style="text-align:right;color:#606266;">
                    {{item.sendTime.split(' ')[0] || ''}}
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>

            <el-tab-pane :name="type.id.toString()" :label="type.label" v-for="type in noticeType" :key="type.id">
              <div v-if="activeTab==type.id">
                <el-row class="link" v-for="item in noticeList" :key="item.id">
                  <el-col :lg="20" :xs="24">
                    <router-link :to="`/noticeinfo/${type.id}/${item.no}`">
                      <el-link icon="el-icon-caret-right">{{item.title | showTitle}}</el-link>
                    </router-link>
                  </el-col>
                  <el-col class="hidden-sm-and-down" :lg="4" style="text-align:right;color:#606266;">
                    {{item.sendTime.split(' ')[0] || ''}}
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-row>
        <!-- 分页区 -->
        <pagination
        ref="pagination"
        @pagination="getPagination"
        :total="parseInt(totalPage)"
        :page="parseInt(searchCondition.page)"
        :limit="parseInt(searchCondition.pageSize)"
        :pageSizes="paginationSize"
        ></pagination>
      </el-col>
      <el-col :lg="{span:6,offset:1}" :xs="24">
        <div class="hidden-md-and-down calendarNBox">

          <el-calendar v-model="calendarValue" :data="{day:'yyyy-MM-dd'}"></el-calendar>
        </div>
      </el-col>
    </el-row>
  </el-main>
</template>

<script>
import {
  getNoticeListApi,
  getNoticeTypeApi,
} from "@/api/notice"
import mySearch from "@/components/MySearch/index";
import pagination from "@/components/Pagination/index";
import 'element-ui/lib/theme-chalk/display.css';
  export default {
    components: {  mySearch, pagination},
    data(){
      return{
        calendarValue: new Date(),
        noticeList:[],
        searchCondition :{
          uid:'',
          nid:'',
          username:'',
          title:'',
          type:'',
          status:1,
          orderField:0,
          startTime:'',
          endTime:'',
          page: 1,
          pageSize: 10,
        },
        activeTab:'',
pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit('pick', [start, end]);
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          }]
        },
        choiceDate:[],
        noticeType:[],
        //分页容量
        paginationSize: [10,20],
        //查询返回 总记录数
        totalPage: 0,
      }
    },
    created(){
      this.getNoticeType();
      this.getNoticeList();
    },
    methods:{
      //查看不同类型公告
      togo(tab){
        if(tab.name!=0){
          this.searchCondition.type = tab.name;
        }else{
          this.searchCondition.type = '';
        }
        this.getNoticeList();
      },
      getDateSearch(arr){
        if(arr&&arr.length==2){
          this.searchCondition.startTime = arr[0]+" "+"0:00:00";
          this.searchCondition.endTime = arr[1]+" "+"23:59:59";
        }else{
          this.searchCondition.startTime = '';
          this.searchCondition.endTime = '';
        }
        this.getNoticeList();
      },
      //标题查询
      getSearchContent(val){
        this.searchCondition.title = val;
        this.getNoticeList();
      },
      //分页查询
      getPagination(val){
        this.searchCondition.page = val.page;
        this.searchCondition.pageSize = val.limit;
        this.getNoticeList();
      },
      //查询
      async getNoticeList(){
        let res = await getNoticeListApi(this.searchCondition);
        if(res&&res.code==200){
          this.totalPage = res.data.total;
          this.noticeList = res.data.list;
        }
      },
      //获取公告类型
      async getNoticeType(){
        let res = await getNoticeTypeApi();
        if(res&&res.code==200){
          this.noticeType = res.data;
        }
      },
    },
    filters:{
      showTitle(val){
        if(val.length>25){
          return val.substring(0,25)+"...";
        }
        return val;
      }
    },
    watch:{
      choiceDate(arr){
        this.getDateSearch(arr)
      }
    }
  }
</script>

<style lang="scss" scoped>
 ::v-deep .el-tabs__item{
  font-size: 16px;
  font-weight: 600;
}
  .link{
    margin-top:10px;
    overflow: hidden;
    .el-link{
      font-size: 18px;
    }
  }
.calendarNBox{
  ::v-deep .el-calendar-table .el-calendar-day{
    height: 40px;
    text-align: center;
  }
  margin-top:3px ;
  width: 400px;
}
</style>
